<template>
  <div class="hello">
    <!-- <el-row>
      <el-button round>圆角按钮</el-button>
      <el-button type="primary" round>主要按钮</el-button>
      <el-button type="success" round>成功按钮</el-button>
      <el-button type="info" round>信息按钮</el-button>
      <el-button type="warning" round>警告按钮</el-button>
      <el-button type="danger" round>危险按钮</el-button>
    </el-row> -->

    <!-- 布局 ElementUI container布局容器-->
    <el-container>
      <el-aside width="auto">
        <!-- 固定组件：侧边栏组件 -->
        <component-aside></component-aside>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 固定组件：顶部组件 -->
          <component-header></component-header>
        </el-header>
        <el-main>
          <!-- 固定组件：标签条组件 -->
          <common-tabs></common-tabs>
          <!-- 动态组件main：嵌套子路由出口，动态替换为组件 -->
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//导入自定义组件
import componentAside from './Aside.vue';
import componentHeader from './Header.vue';
import CommonTabs from './CommonTabs.vue';

export default {
  name: "home",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  components: {
    "component-aside": componentAside,  //组件对象 可写成 "标签名：组件名" 的格式 也可以直接 componentAside
    "component-header":componentHeader,
    CommonTabs  //注册组件的另一种写法，标签名和该组件名称是驼峰关系
  }
}
</script>

<style>
.el-header, .el-main{
  padding: 0px;
  
}
</style>


